<!--
 * @Author: chunlai
 * @Date: 2023-12-07 08:52:00
 * @LastEditTime: 2025-11-26 14:22:22
 * @LastEditors: minsheng_insurance_agency_zhoucl
 * @FilePath: \01.latest-short-insure\src\views\assess\index.vue
 * @Description: 普通人身保险适当性评估问卷
-->

<template>
  <div class="assess-page">
    <div class="page-tt">普通人身保险适当性评估问卷</div>
    <p class="tip">
      感谢您选择我公司投保该产品。为保护您的合法权益，向您提供合适的保险产品及更好的服务，根据《互联网保险业务监管办法》《关于进一步规范保险机构互联网人身保险业务有关事项的通知》等规定，本公司特意设置本问卷，旨在了解您可承受的风险程度，并在此和您提供的相关信息及证明资料基础上，协助您选择合适的产品或服务，以符合您的风险承受能力。因此需您如实填写本问卷，并对所提供的信息和证明材料的真实性、准确性、完整性负责。<br /><strong
        >特别提醒：</strong
      >本公司履行风险承受能力评估等适当性职责，并不能取代您自己购买产品和选择相关服务的判断，也不会降低产品或服务的固有风险。同时与产品或服务相关的风险、履约责任以及费用等将由您自行承担。<br />如选择了和自己保险需求、交费能力或风险承受能力不相符的保险产品，可能会出现以下情况，造成您的损失：<br />1.因经济原因，在保险合同期满前退保，产生退保损失；<br />2.不能按期缴费，导致保险合同失效；<br />3.保险责任与您的需求不匹配，无法提供您所需的保障或收益。
    </p>
    <div class="ques_ul" v-for="(item, index) in quesList" :key="`que${index}`">
      <div class="que-tt">{{ index + 1 }}、{{ item.name }}</div>
      <div
        class="checkbox_span"
        @click="checkItem(index, ele)"
        v-for="(ele, idx) in item.selects"
        :key="`que-select${idx}`"
      >
        <span
          class="van-checkbox__icon"
          :class="item.value === ele.value ? 'van-checkbox__icon--checked' : ''"
        >
          <i class="van-icon van-icon-success"></i>
        </span>
        <span class="checkbox_text">{{ ele.label }}</span>
      </div>
    </div>

    <div class="mt10">
      <b class="tc">投保声明</b>
      <p class="">
        本人已阅读并充分理解此问卷的询问内容和含义，且已如实回答，理解此问卷所揭示的风险，在投保时已充分了解所投保保险产品情况，并自愿承担保单利益不确定性的风险。
      </p>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "PreInsurePage",
  components: {},
  data() {
    return {
      quesList: [
        {
          id: "1",
          name: "您的年龄是（周岁）",
          value: "",
          isPass: "2",
          selects: [
            {
              label: "18-25",
              value: "a",
              isPass: "1",
            },
            {
              label: "26-50",
              value: "b",
              isPass: "1",
            },
            {
              label: "51-80",
              value: "c",
              isPass: "1",
            },
            {
              label: "高于80岁",
              value: "d",
              isPass: "2",
            },
          ],
        },
        {
          id: "2",
          name: "您的保费预算占家庭年收入的比重为",
          value: "",
          isPass: "2",
          selects: [
            {
              label: "不超过家庭年收入的10% ",
              value: "a",
              isPass: "1",
            },
            {
              label: "家庭年收入的10%-30%",
              value: "b",
              isPass: "1",
            },
            {
              label: "超过家庭年收入的30% ",
              value: "c",
              isPass: "2",
            },
          ],
        },
        {
          id: "3",
          name: "您是否可以自主完成在线投保及使用在线服务等功能？",
          value: "",
          isPass: "2",
          style: "row",
          selects: [
            {
              label: "可以",
              value: "a",
              isPass: "1",
            },
            {
              label: "不可以",
              value: "b",
              isPass: "2",
            },
          ],
        },
        {
          id: "4",
          name: "您是否能够独立阅读保险条款并理解保险责任？",
          value: "",
          isPass: "2",
          style: "row",
          selects: [
            {
              label: "可以",
              value: "a",
              isPass: "1",
            },
            {
              label: "不可以",
              value: "b",
              isPass: "2",
            },
          ],
        },
        {
          id: "5",
          name: "您打算购买保险的主要原因？",
          value: "",
          isPass: "2",
          selects: [
            {
              label: "增加一份保障，防范风险。",
              value: "a",
              isPass: "1",
            },
            {
              label: "期望获得一定收益。",
              value: "b",
              isPass: "1",
            },
            {
              label: "没有明确概念。",
              value: "c",
              isPass: "2",
            },
          ],
        },
        {
          id: "6",
          name: "您购买保险的资金来源及用途？",
          value: "",
          isPass: "2",
          selects: [
            {
              label: "闲置资金，专项用于保险，不考虑其他用途。",
              value: "a",
              isPass: "1",
            },
            {
              label: "闲置资金的一部分，不排除在保险期满前提前退保的情况发生。",
              value: "b",
              isPass: "1",
            },
            {
              label: "非闲置资金，购买保险的资金随时都可能要用于其他用途。",
              value: "c",
              isPass: "2",
            },
          ],
        },
        {
          id: "7",
          name: "您是否了解犹豫期的规则并能接受犹豫期后退保可能造成的损失？",
          value: "",
          isPass: "2",
          selects: [
            {
              label:
                "清楚，在犹豫期内可全额退保，超出犹豫期后退保可能会产生损失。",
              value: "a",
              isPass: "1",
            },
            {
              label:
                "不清楚，但可以接受因犹豫期后退保导致所交保费不能全额返还的情况。",
              value: "b",
              isPass: "1",
            },
            {
              label:
                "不清楚，且不能接受因犹豫期后退保导致所交保费不能全额返还的情况。",
              value: "c",
              isPass: "2",
            },
          ],
        },
      ],
    };
  },
  computed: {
    ...mapGetters({
      // preInsConfig: 'home/preInsConfig',
    }),
    // pretype() {
    //   return (this.preInsConfig && this.preInsConfig.type) || '';
    // },
  },
  created() {
    document.title = "普通人身保险适当性评估问卷";
  },
  methods: {
    checkItem(index, ele) {
      this.$set(this.quesList[index], "value", ele.value);
      this.$set(this.quesList[index], "isPass", ele.isPass);
    },
  },
};
</script>
<style lang="less" scoped>
.assess-page {
  min-height: 100vh;
  padding: 0 12px;
  padding-bottom: 30px;
  background-color: #fff;
  .page-tt {
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    padding: 20px 0;
    font-family: MiSans;
  }
  .tip {
    font-size: 14px;
    line-height: 1.5;
    text-indent: 2em;
  }
}
.ques_ul {
  padding-bottom: 10px;
  margin-top: 10px;
  position: relative;
  &::after {
    position: absolute;
    box-sizing: border-box;
    content: " ";
    pointer-events: none;
    right: 0;
    bottom: 0;
    left: 0;
    transform: scaleY(0.5);
    border-bottom: 1px solid #ebedf0;
  }
}
.que-tt {
  color: #303133;
  line-height: 21px;
  font-weight: 600;
}

.checkbox_span {
  display: flex;
  line-height: 20px;
  color: #606266;
  padding-left: 10px;
  margin-top: 10px;
  .checkbox_text {
    line-height: 20px;
  }
}

.van-checkbox__icon {
  display: inline-block;
  margin-right: 5px;
  .van-icon {
    border-radius: 4px;
  }
}
.van-checkbox__icon--checked {
  .van-icon {
    border-color: #409eff;
    background-color: #409eff;
  }
}
</style>
